<section class="content-header">
  <h1>
    {{lang.Hives}}
    <div class="pull-right">
    	<div ng-if="hives.length == 0">
			<a href="#!/locations/create" class="btn btn-primary"><i class="fa fa-plus"></i> {{mobile ? lang.New : lang.create_new}} {{lang.location}}</a>
		</div>
		<div ng-if="hives.length > 0">
			<a href="#!/hives/create" class="btn btn-primary"><i class="fa fa-plus"></i> {{mobile ? lang.New : lang.create_new}} {{lang.hive}}</a>
		</div>
    </div>
  </h1>
  <!-- <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
    <li class="active">{{lang.hives}}</li>
  </ol> -->
</section>

<section class="content" >
	
	<div class="box" ng-if="hives.length == 0">
		<div class="box-header with-border">
	      <h3 class="box-title">
	      	{{lang.Hives}}
	      </h3>
	    </div>

	    <div class="box-body" ng-class="{'no-padding':mobile}" style="min-height: 300px;">
	    </div>

		<div class="overlay">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
	 </div>

	<div class="box" ng-if="hives.length > 0">
	    <div class="box-header with-border">
	      <h3 class="box-title">{{lang.Hives}}</h3>

	      <div class="box-tools pull-right">
	      	<span ng-if="!mobile">{{lang.Filter_and_sort_on}}</span>

	      	<a class="btn btn-xs btn-{{orderName == 'name' ? 'primary' : 'default'}}" ng-click="setOrder('name')" title="{{lang.Name}}">
	      		<i class="fa fa-long-arrow-{{orderName == 'name' ? orderDirection ? 'up' : 'down' : 'down'}}"></i> 
	      		{{ lang.Name }}
	      	</a>

	      	<a class="btn btn-xs btn-{{orderName == 'sensors' ? 'primary' : 'default'}}" ng-click="setOrder('sensors')" title="{{lang.sensors}}">
	      		<i class="fa fa-long-arrow-{{orderName == 'sensors' ? orderDirection ? 'up' : 'down' : 'down'}}"></i> 
	      		<i class="fa fa-feed"></i>
	      	</a>

	      	<a class="btn btn-xs btn-{{orderName == 'impression' ? 'primary' : 'default'}}" ng-click="setOrder('impression')" title="{{lang.positive_impression}}">
	      		<i class="fa fa-long-arrow-{{orderName == 'impression' ? orderDirection ? 'up' : 'down' : 'down'}}"></i> 
	      		<i class="fa fa-smile-o"></i>
	      	</a>

	      	<a class="btn btn-xs btn-{{orderName == 'attention' ? 'primary' : 'default'}}" ng-click="setOrder('attention')" title="{{lang.needs_attention}}">
	      		<i class="fa fa-long-arrow-{{orderName == 'attention' ? orderDirection ? 'up' : 'down' : 'down'}}"></i> 
	      		<i class="fa fa-exclamation"></i>
	      	</a>

	      	<a class="btn btn-xs btn-{{orderName == 'reminder_date' ? 'primary' : 'default'}}" ng-click="setOrder('reminder_date')" title="{{lang.reminder}}">
	      		<i class="fa fa-long-arrow-{{orderName == 'reminder_date' ? orderDirection ? 'up' : 'down' : 'down'}}"></i> 
	      		<i class="fa fa-calendar"></i>
	      	</a>

	      	<a class="btn btn-xs btn-{{orderName == 'location' ? 'primary' : 'default'}}" ng-click="setOrder('location')" title="{{lang.Location}} {{lang.name}}">
	      		<i class="fa fa-long-arrow-{{orderName == 'location' ? orderDirection ? 'up' : 'down' : 'down'}}"></i> 
	      		<i class="fa fa-map-marker"></i>
	      	</a>

	      </div>
	    </div>
	    <!-- /.box-header -->
	    <div class="box-body" ng-class="{'table-responsive':mobile, 'no-padding':mobile}">
	      
	        <div ng-if="!mobile" class="hives-container">
	      		<div ng-repeat="(key, hive) in hives | filter:{[orderName]:''} | orderBy:orderName:orderDirection:natSort" class="hive-container" >
	            	<beep-hive hive="hive" hiveview="true"></beep-hive>
            	</div>
	      	</div>

	      	<table ng-if="mobile" class="table table-striped table-responsive">
				<tbody>
					<tr ng-repeat="(key, hive) in hives | filter:{[orderName]:''} | orderBy:orderName:orderDirection:natSort">
						<td>
							<beep-hive hive="hive" hiveview="true"></beep-hive>
			            </td>
					</tr>
				</tbody>
			</table>

	    </div>
	    <!-- /.box-body -->
	    <!-- <div class="box-footer clearfix">
	      <a href="javascript:void(0)" class="btn btn-sm btn-primary">{{lang.create_new}} {{lang.hive}}</a>
	    </div> -->
	    <!-- /.box-footer -->
	    <div class="overlay" ng-if="loading">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
	 </div>

</section>
